<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="mine">
				提现
			</view>
			<view class="nav flex">
				<view class="nav_item flex_center" :class="current==1?'active_nav':''" @tap="changeNav(1)">数字钱包</view>
				<view class="nav_item flex_center" :class="current==2?'active_nav':''" @tap="changeNav(2)">银行卡</view>
				<view class="nav_bg" :class="current==1?'nav_left':'nav_right'"></view>
			</view>
			<view v-if="current==1">
				<view class="form_item">
					<view class="crypto">选择钱包</view>
					<view class="item_box input_box" @tap="openPopup">{{wallet.address_str}}
					</view>
				</view>
				<view class="form_item">
					<view class="crypto">确认地址</view>
					<view class="item_box input_box flex">
						<input type="text" maxlength="30" v-model="wallet.address" />
					</view>
				</view>
				<view class="form_item">
					<view class="crypto">
						提现金额(50USD ~ 10,000,000USD)
					</view>
					<view class="item_box input_box flex">
						<input type="number" maxlength="20" v-model="amount" />
					</view>
					<view class="crypto flex_between" style="margin-top: 20rpx;">
						<text>手续费: {{ withdrawalFee }}</text>
						<text>实际到账: {{ actualAmount }}</text>
					</view>
				</view>
				<view class="fixed">
					<view class="done btn flex_between" @tap="confirmBtn">
						<text>完成</text>
						<uni-icons type="arrow-right" size="24" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
			<view v-if="current==2">
				<view class="card_tips flex_center" style="flex-direction: column;" v-if="!aisleList">
					<image src="../../../static/img/no_card.png" style="width: 420rpx;height: 380rpx;"></image>
					<text style="opacity: .4;">请先添加银行卡</text>
				</view>
				<view v-if="aisleList">
					<view class="form_item">
						<view class="crypto">选择银行卡</view>
						<view class="item_box input_box" @tap="openPopup">{{bank.address_str}}
						</view>
					</view>
					<view class="form_item">
						<view class="crypto">银行名称</view>
						<view class="item_box input_box flex">
							<input type="text" maxlength="30" v-model="bank.bank" />
						</view>
					</view>
					<view class="form_item">
						<view class="crypto">银行卡号</view>
						<view class="item_box input_box flex">
							<input type="text" maxlength="30" v-model="bank.address" />
						</view>
					</view>
					<view class="form_item">
						<view class="crypto">
							提现金额(50USD ~ 10,000,000USD)
						</view>
						<view class="item_box input_box flex">
							<input type="number" maxlength="20" v-model="amount" />
						</view>
						<view class="crypto flex_between" style="margin-top: 20rpx;">
							<text>手续费: {{ withdrawalFee }}</text>
							<text>实际到账: {{ actualAmount }}</text>
						</view>
					</view>
					<view class="fixed">
						<view class="done btn flex_between" @tap="confirmBtn">
							<text>完成</text>
							<uni-icons type="arrow-right" size="24" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="bottom" :round="20">
			<view class="mask">
				<view class="back flex_center" @tap="close">
					<uni-icons type="closeempty" size="18" color="#3d3d3d"></uni-icons>
				</view>
				<view class="title font_title" v-if="current==1">选择数字钱包</view>
				<view class="title font_title" v-if="current==2">选择银行卡</view>
				<view class="list">
					<view class="item flex" v-for="item in aisleList">
						<view class="logo">
							<image :src="item.image" style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="i_list">
							<view class="i_item flex_between" @tap="changeAisle(item)">
								<text class="font_title">{{item.address_str}}</text>
								<uni-icons v-if="aisle.id == item.id" custom-prefix="iconfont" type="icon-duigou"
									color="#0065ff" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		withdrawalApi,
		getSettingApi,
		walletListApi
	} from '@/api/api'
	export default {
		components: {
			headerView
		},
		data() {
			return {
				address: '',
				list: ['密码', '银行'],
				current: 1,
				bank: {},
				wallet: {},
				aisle: {},
				show: false,
				aisleList: [],
				amount: "",
				set: {},
			}
		},
		onLoad() {
			this.getWalletList()
			this.getSetting()
		},
		computed: {
			withdrawalFee() {
				// 判断 this.amount 是否为空，为空则用 0 计算手续费
				const inputAmount = parseFloat(this.amount) || 0;
				return (inputAmount * parseFloat(this.set.withdrawal_p)).toFixed(2);
			},
			actualAmount() {
				const inputAmount = parseFloat(this.amount) || 0;
				const withdrawalFee = inputAmount * parseFloat(this.set.withdrawal_p)
				// 计算实际到账金额
				return (inputAmount - withdrawalFee).toFixed(2);
			},

		},
		methods: {
			// 获取配置
			getSetting() {
				getSettingApi().then(res => {
					console.log(res.data.data)
					this.set = res.data.data
				})
			},
			// 获取钱包银行卡列表
			getWalletList() {
				const token = uni.getStorageSync('token')
				let type = ''
				if (this.current == 1) {
					type = '2'
				} else {
					type = '1'
				}
				walletListApi({
					type,
					token
				}).then(res => {
					this.aisleList = res.data.data
				})
			},
			changeNav(key) {
				if (key == this.current) return
				this.current = key
				this.getWalletList()
			},
			// 切换钱包/银行卡
			async changeAisle(opt) {
				if (this.aisle.id == opt.id) return
				if (this.current == 1) {
					this.wallet = opt
				} else {
					this.bank = opt
				}
				this.aisle = opt
				console.log(this.aisle)
				setTimeout(() => {
					this.close();
				}, 100);
			},
			openPopup() {
				this.show = true
			},
			close() {
				this.show = false
			},
			// 提现
			confirmBtn() {
				if (this.amount == '') {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				const token = uni.getStorageSync('token'); // 获取token，假设已经在localStorage中存储
				const wallet_id = this.aisle.id; // 获取钱包网络ID
				const price = this.amount; // 获取提现金额
				withdrawalApi({
					token,
					wallet_id,
					price
				}).then(res => {
					// 处理接口返回的结果
					if (res.data.code == -5) {
						// 提示实名认证未通过
						uni.showToast({
							title: '实名认证未通过',
							icon: 'none',
							duration: 3000
						});
						// 跳转到实名认证页面
						uni.navigateTo({
							url: '/pages/user/verified/verified'
						});
					} else {
						// 其他情况处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/withdraw/withdraw' // 你需要刷新的页面路径
							});
						}, 2000); // 延迟3秒后刷新页面，可以根据需要调整延迟时间
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.mine {
			padding-top: 60rpx;
			font-size: 30px;
			font-weight: 500;
			font-family: PM;
			line-height: 92rpx;
		}

		.nav {
			height: 100rpx;
			line-height: 100rpx;
			background-color: rgba(237, 237, 237, .46);
			border-radius: 40rpx;
			overflow: hidden;
			position: relative;
			font-size: 32rpx;
			margin-top: 40rpx;

			.nav_item {
				flex: 1;
				position: relative;
				z-index: 10;
				opacity: .3;
				transition: all .3s ease;
			}

			.nav_bg {
				position: absolute;
				top: 6rpx;
				background-image: url("../../../static/img/page_bg.png");
				background-size: cover;
				z-index: 1;
				border-radius: 40rpx;
				width: calc(50% - 6rpx);
				height: calc(100% - 12rpx);
				z-index: 9;
				transition: all .3s ease;
			}

			.nav_left {
				left: 6rpx;
			}

			.nav_right {
				left: 50%;
			}

			.active_nav {
				color: #0065ff;
				opacity: 1;
			}
		}

		.crypto {
			font-family: PM;
			margin-top: 50rpx;
			opacity: .8;
		}

		.fixed {
			.btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				padding: 0 40rpx;
				border-radius: 20rpx;
				background-image: url("../../../static/img/btn_bg.png");
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
			}

			.done {
				background-color: #0065ff;
				margin-left: 40rpx;
				margin-top: 80rpx;
				border-radius: 20rpx 0px 0px 20rpx;
			}
		}

		.form_item {

			.item_box {
				margin-top: 20rpx;
				background-color: hsla(0, 0%, 92.9%, .46);
				border-radius: 20rpx;
				font-size: 30rpx;
				border: 4rpx solid #3d3d3d;
				width: 100%;
				font-size: 30rpx;
				padding: 0 40rpx;
				font-weight: 600;
				font-family: PM;
			}

			.input_box {
				height: 90rpx;
				line-height: 90rpx;
			}
		}

		.card_tips {
			height: 45vh;
			font-size: 32rpx;
			padding: 0 50rpx;
			text-align: center;
		}
	}

	.mask {
		width: 100%;
		height: auto;
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx;

		.back {
			width: 72rpx;
			height: 72rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
		}

		.title {
			font-size: 50rpx;
			margin: 40rpx 0;
		}

		.list {
			.item {
				margin: 20rpx 0;
				align-items: flex-start;

				.logo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					margin-right: 30rpx;
					flex-shrink: 0;
				}

				.i_list {
					flex: 1;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					padding: 20rpx 30rpx;
					border-radius: 20rpx;

					.i_item {
						padding: 10rpx 0;
						font-weight: 600;

						.font_title {
							font-size: 32rpx;
							font-weight: 500;
						}

						.i_address {
							word-break: break-all;
							opacity: .6;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>